<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm ref="filterForm" :elements="filterElements" @submit="handleSearch" @reset="handleReset">
        <Button
          style="display: inline-block;"
          @click="handleExport"
        >导出</Button>
      </FilterForm>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer style="margin-bottom: 10px">
        <!-- <Button style="margin-right: 12px" @click="actionUnfoldFunc(true)"
          >导出</Button
        > -->
      </OperationContainer>
      <el-table
        ref="tableref"
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8',textAlign:'center' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        row-key="code"
        height="100%"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column label="基本信息" align="center" width="270">
          <el-table-column align="center" type="index" label="序号" width="50" />
          <el-table-column prop="deptCode" label="科室代码" width="80">
            <template slot-scope="scope">
              <div class="text-btn" @click="handleDept(scope.row)">
                {{ scope.row.deptCode }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deptName" label="科室名称" width="140" />
        </el-table-column>
        <el-table-column label="人员费用" align="center">
          <el-table-column prop="directPersonnel" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directPersonnel | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectPersonnel" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectPersonnel | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalPersonnel" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalPersonnel | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="药品费用" align="center">
          <el-table-column prop="directDrug" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directDrug | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectDrug" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectDrug | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalDrug" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalDrug | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="卫生材料费用" align="center">
          <el-table-column prop="directSanitaryMaterials" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directSanitaryMaterials | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectSanitaryMaterials" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectSanitaryMaterials | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSanitaryMaterials" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalSanitaryMaterials | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="固定资产折旧费" align="center">
          <el-table-column prop="directFixed" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directFixed | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectFixed" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectFixed | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalFixed" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalFixed | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="无形资产折旧费" align="center">
          <el-table-column prop="directIntangible" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directIntangible | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectIntangible" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectIntangible | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalIntangible" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalIntangible | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="提取医疗风险基金" align="center">
          <el-table-column prop="directRisk" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directRisk | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectRisk" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectRisk | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalRisk" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalRisk | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="其他费用" align="center">
          <el-table-column prop="directOther" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directOther | numberToCurrency }}
            </template>
          </el-table-column>

          <el-table-column prop="indirectOther" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectOther | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalOther" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalOther | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="合计" align="center" fixed="right" width="420">
          <el-table-column prop="directSum" label="直接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.directSum | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="indirectSum" label="间接成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.indirectSum | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSum" label="全成本" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalSum | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <div class="pagenation-box">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
      <ClinicCostDrawer
        v-if="isShow"
        :table-children-data="tableChildrenData"
        :is-show="isShow"
        @handleCancle="handleCancle"
      />
    </Container>
  </ContainerGroup>
</template>

<script>
import {
  listAmortizationDataByDate,
  listAmortizationDataByPDeptCode,
  download2
} from '@/utils/apis/report'
import ClinicCostDrawer from './component/clinicCostDrawer'
export default {
  name: 'ClinicCost', // 医院临床服务类科室全成本表
  components: {
    ClinicCostDrawer
  },
  data() {
    return {
      tableChildrenData: [],
      isShow: false,
      filterElements: [
        {
          key: 'yearMonth',
          label: '年/月',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [this.$util.currentDate(), this.$util.currentDate()],
          width: 340
        }
        // {
        //   key: "aihao",
        //   type: "Select",
        //   label: "院区",
        //   value: "",
        //   width: 210,
        //   options: [
        //     {
        //       label: "全部",
        //       value: "1",
        //     },
        //     {
        //       label: "浒关院区",
        //       value: "2",
        //     },
        //     {
        //       label: "三香院区",
        //       value: "3",
        //     },
        //   ],
        // },
      ],
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      newParamList: {}
    }
  },
  created() { },
  updated() {
    if (this.$refs.tableref) {
      this.$refs.tableref.doLayout()
    }
  },
  mounted() { },
  methods: {
    handleExport() { // 导出
      const fieldVal = this.$refs.filterForm.getParms()
      const date = fieldVal?.yearMonth
      const param = {
        yard: '1',
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      download2(param).then(res => {
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '临床服务类科室成本表.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleCancle(res) {
      this.isShow = res.isShow
    },
    handleDept(row) {
      this.isShow = true
      const date = this.newParamList.yearMonth
      const param = {
        yard: '1',
        starYear: this.$moment(date[0]).format('YYYY'),
        endYear: this.$moment(date[1]).format('YYYY'),
        starMonth: this.$moment(date[0]).format('MM'),
        endMonth: this.$moment(date[1]).format('MM')
      }
      listAmortizationDataByPDeptCode(param, row.deptCode).then((res) => {
        if (res.data.code === 200) {
          this.tableChildrenData = res.data.data
        }
      })
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (index >= 3) {
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$numberToCurrencyNo(sums[index])
            // sums[index] += " 元";
          } else {
            sums[index] = 'N/A'
          }
        }
      })
      return sums
    },
    handleSearch(value) {
      this.newParamList = value
      this.pageAttr.currentPage = 1
      this.getData()
    },
    handleReset() {
      location.reload()
    },
    createNewData() { },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageNum = val
    },
    getData() {
      // 列表
      // const date = this.newParamList.yearMonth
      // const currentYear = new Date(date).getFullYear()
      // const currentMonth = new Date(date).getMonth() + 1
      const param = {
        starYear: this.$moment(this.newParamList.yearMonth[0]).format('YYYY'),
        endYear: this.$moment(this.newParamList.yearMonth[1]).format('YYYY'),
        starMonth: this.$moment(this.newParamList.yearMonth[0]).format('MM'),
        endMonth: this.$moment(this.newParamList.yearMonth[1]).format('MM'),
        yard: '1'
      }
      this.tableLoading = true
      listAmortizationDataByDate(param).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
        this.tableLoading = false
      })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}

.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
